<template>
  <div>
    <div class="app-container pageHeader">
      <div class="header">{{$route.meta.title}}</div>
    </div>
    <div class="app-container margin-content padding-content">
      <div class="clearfix">
        <div class="btn-wrapper fl">
          <el-button type="primary" icon="el-icon-edit" @click="addOrUpdateHandle()">新建角色
          </el-button>
          <el-button type="danger" icon="el-icon-delete" @click="deleteHandle()">删除</el-button>
          <el-button icon="el-icon-menu" @click="groups()">角色组管理</el-button>
        </div>
        <div class="fr">
          <el-input change-on-select v-model="name" placeholder="请输入角色名称"
                    @keyup.native="doSearchRoles">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div class="fr" style="margin-right:10px;">
          <el-select v-model="rolesGroupId" placeholder="请选择分组" @change="handleGroupChange">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <el-table
        :height="scrollHeight"
        :key="tableKey"
        :data="list"
        v-loading="listLoading"
        element-loading-text="正在加载..."
        @selection-change="selectionChangeHandle"
        style="width: 100%">

        <el-table-column type="selection" width="55"/>
        <el-table-column label="角色ID" property="id"/>
        <el-table-column label="角色名称" property="name"/>
        <el-table-column label="所属角色组" width="200">
          <template slot-scope="scope">
            <el-tag>{{scope.row.parentName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="BIID" property="biId"/>
        <el-table-column label="角色类型" property="rolesType"/>
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <a @click="auth(scope.row)">授权</a>
            <divider type="vertical"></divider>
            <a @click="members(scope.row)">成员维护</a>
            <divider type="vertical"></divider>
            <a @click="addOrUpdateHandle(scope.row.id)">修改</a>
            <divider type="vertical"></divider>
            <a @click="deleteHandle(scope.row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container align-right" v-show="list.length > 0">
        <el-pagination v-if="isShow" @current-change="handleCurrentChange" :current-page="page.pageNum"
                       :page-size="page.pageSize" layout="total,  prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh="getRolesList()"></add-or-update>

  </div>
</template>

<script>
  // api
  import { getRolesList, delRole, getRoleGroupList } from '@/api/roles'
  //  import permission from '@/directive/permission/index'

  // components
  import Divider from '@/components/Divider'
  import AddOrUpdate from './components/role-add-or-update'

  export default {
    name: 'rolesMain',
    components: {
      Divider,
      AddOrUpdate
    },
//    directives: {permission},
    data() {
      return {
        options: [],
        rolesGroupId: -1,
        tableKey: 0,
        isShow: false,
        scrollHeight: null,
        page: {
          pageNum: 1,
          pageSize: 20
        },
        saveSetTimeoutSearch: null,
        total: 0,
        name: '',
        id: null,
        listLoading: false,
        list: [],
        dataListSelections: [],
        addOrUpdateVisible: false
      }
    },
    watch: {
//      name() {
//        this.getRolesList()
//      }
    },
    created() {
      this.getRolesList()
      this.getRolesGroups()
      this.tableResize()
    },
    methods: {
      tableResize() {
        const _height = 320
        this.scrollHeight = document.body.scrollHeight - _height
        window.onresize = () => {
          this.scrollHeight = document.body.scrollHeight - _height
        }
      },
      getRolesGroups() {
        getRoleGroupList({ pageSize: 9999 }).then(res => {
          res = res.data
          this.options = [{ name: '全部分组', id: '-1' }, ...res.data.dataList]
          this.rolesGroupId = '-1'
        })
      },
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      getRolesList() {
        this.listLoading = true
        this.isShow = false
        const params = {
          name: this.name,
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }
        if (parseInt(this.rolesGroupId) !== -1) {
          params.parentId = this.rolesGroupId
        } else {
          params.parentId = null
        }
        getRolesList(params).then((res) => {
          this.isShow = true
          res = res.data
          this.list = res.data.dataList !== '' ? res.data.dataList : []
          this.total = res.data.total !== '' ? res.data.total : 0
          this.listLoading = false
        })
      },

      // 当前页
      handleCurrentChange(val) {
        this.page.pageNum = val
        this.getRolesList()
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs['addOrUpdate'].init(id)
        })
      },
      // 删除
      deleteHandle(id) {
        let ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        ids = ids.join(',')
        if (ids.length === 0) {
          this.$message({ showClose: true, message: '请先选择一条', type: 'warning' })
        } else {
          this.$confirm(`确定删除所选角色?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            delRole({ ids: ids }).then(() => {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getRolesList()
            })
          }).catch(() => {
          })
        }
      },
      // 搜索
//      handleSearch() {
//      },
//      // 0-Index, 1-Groups, 2-Auth, 3-Members
      groups() {
        this.$parent.changeView(1)
      },
      auth(row) {
        this.$parent.changeView(2)
        this.$store.dispatch('setCurrentId', row)
      },
      members(row) {
        this.$parent.changeView(3)
        this.$store.dispatch('setCurrentId', row)
      },
      doSearchRoles() {
        clearTimeout(this.saveSetTimeoutSearch)
        this.saveSetTimeoutSearch = setTimeout(() => {
          this.page.pageNum = 1
          this.getRolesList()
        }, 500)
      },
      handleGroupChange() {
        this.page.pageNum = 1
        this.getRolesList()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
